@import '../themes/default.less';


.divider(@style: 'bottom') when (@style ='bottom') {
    position: relative;

    &::after {
        content       : ' ';
        display       : block;
        position      : absolute;
        left          : -50%;
        bottom        : -50%;
        width         : 200%;
        height        : 200%;
        border-bottom : 1px solid @dividerColor;
        transform     : scale(0.5);
        pointer-events: none;
    }
}

.dividerClear() {
    &::after {
        display: none;
    }

    &::before {
        display: none;
    }
}


.divider(@style) when (@style ='all') {
    position: relative;

    &::after {
        content       : ' ';
        display       : block;
        position      : absolute;
        left          : -50%;
        bottom        : -50%;
        width         : 200%;
        height        : 200%;
        border        : 1px solid @dividerColor;
        transform     : scale(0.5);
        pointer-events: none;
    }
}

.divider(@style) when (@style ='left') {
    position: relative;

    &::before {
        content       : ' ';
        display       : block;
        position      : absolute;
        left          : -50%;
        bottom        : -50%;
        width         : 200%;
        height        : 200%;
        border-left   : 1px solid @dividerColor;
        transform     : scale(0.5);
        pointer-events: none;
    }
}

.divider(@style) when (@style ='top') {
    position: relative;

    &::before {
        content       : ' ';
        display       : block;
        position      : absolute;
        left          : -50%;
        bottom        : -50%;
        width         : 200%;
        height        : 200%;
        border-top    : 1px solid @dividerColor;
        transform     : scale(0.5);
        pointer-events: none;
    }
}


.divider(@style) when (@style ='right') {
    position: relative;

    &::after {
        content       : ' ';
        display       : block;
        position      : absolute;
        left          : -50%;
        bottom        : -50%;
        width         : 200%;
        height        : 200%;
        border-right  : 1px solid @dividerColor;
        transform     : scale(0.5);
        pointer-events: none;
    }
}
